<template>
  <div>
    <van-nav-bar
      title="密码设置"
      left-text=""
      left-arrow
      @click="backlink()"
    ></van-nav-bar>
    <van-form @submit="onSubmit" class="loginbox" validate-first>
      <van-field
        v-model="phonenumber"
        name="手机号"
        label="手机号"
        placeholder="请输入手机号"
        :rules="[
          { required: true, message: '请输入手机号' },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: '请输入正确的手机号',
          },
        ]"
      />
      <van-field
        v-model="captcha"
        center
        clearable
        label="短信验证码"
        placeholder="请输入短信验证码"
      >
        <template #button>
          <van-button
            v-if="codeshow"
            round
            size="small"
            type="primary"
            native-type="submit"
          >
            发送验证码
          </van-button>
          <van-button
            v-if="!codeshow"
            round
            size="small"
            type="primary"
            readonly
          >
            {{ codetime }}秒后重新获取
          </van-button>
        </template>
      </van-field>
      <van-field
        v-model="password"
        name="密码"
        label="密码"
        placeholder="请输入密码"
        type="password"
        :rules="[
          { required: true, message: '请输入密码' },
          {
            pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/,
            message: '需要6-20位数字和字母组合',
          },
        ]"
      />
      <van-field
        v-model="password1"
        name="密码"
        label="确认密码"
        placeholder="请再次输入密码"
        type="password"
        :rules="[
          { required: true },
          {
            validator: validateConfirmationPassword,
          },
        ]"
      />
      <div style="margin: 10px">
        <van-button round block type="primary" @click="eidtpassword">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { sendcode, userpasswordedit } from "@/http/request.js";
import { showToast } from "vant";
import { useStore } from "@/store";
export default {
  data() {
    return {
      userid: "",
      phonenumber: "",
      captcha: "",
      codeshow: true,
      show: false,
      codetime: 60,
      password: "",
      password1: "",
    };
  },
  methods: {
    inituserinfo() {
      const store = useStore();
      const userinfo = store.getUserStoreinfo;
      if (userinfo !== null) {
        this.nickname = userinfo.nickname;
        this.phone = userinfo.phone;
        this.userid = userinfo.id;
        this.uid = userinfo.uid;
        this.image = userinfo.image;
      } else {
        showToast("请先登录或者登录已失效");
      }
    },
    onSubmit() {
      sendcode({ phone: this.phonenumber }).then((res) => {
        this.codeshow = false;
        let timer = setInterval(() => {
          this.codetime--;
          if (this.codetime <= 0) {
            clearInterval(timer);
            this.codeshow = true; // 显示发送验证码按钮
            this.codetime = 60; // 重置倒计时时间
          }
        }, 1000);
      });
    },
    eidtpassword() {
      const formdata = {
        id: this.userid,
        phone: this.phonenumber,
        code: this.captcha,
        password: this.password,
      };
      userpasswordedit(formdata).then((res) => {
        if (res.code === 0) {
          showToast(res.msg);
        } else {
          showToast(res.msg);
        }
      });
    },
    validateConfirmationPassword(value) {
      if (value === "") {
        return "请再次输入密码";
      } else if (value !== this.password) {
        return "两次输入密码不一致!";
      } else {
        return true;
      }
    },
    backlink() {
      this.$router.back();
    },
  },
  mounted() {
    this.inituserinfo();
  },
};
</script>

<style scoped>
.loginbox {
  width: 100%;
  border-radius: 15px;
}
</style>